@import "components/ui.selectmenu";

div#analytics_body {
  .status_green {
    color: #39a12c;
    font-weight: bolder;
  }
  .status_yellow {
    color: #b2a700;
    font-weight: bolder;
  }
  .status_red {
    color: #d61e1c;
    font-weight: bolder;
  }
  h2, .h2 {
    font-size: 23px;
    font-weight: normal;
    margin-bottom: 5px;
    line-height: 35px;
    margin-top: 0px;
  }
  div.student_summary {
    padding-bottom: 15px;
    .avatar {
      float: direction(left);
      margin-#{direction(right)}: 10px;
      margin-top: 6px;
    }
    table {
      th, td {
        margin-bottom: 3px;
        font-size: 1.3em;
        &.message_student {
          padding-#{direction(left)}: 10px;
        }
      }
      th[scope='col'] {
        padding-#{direction(right)}: 10px;
      }
    }
    #course_info {
      display: inline-block;
      position: absolute;
      #{direction(right)}: 0;
      margin-#{direction(right)}: 2em;
      h3, .h3 {
        margin-bottom: 0.5em;
        text-align: direction(right);
        font-size: 20px;
        font-weight: normal;
        line-height: 19px;
        margin-top: 0px;
      }
    }
  }
  div.department_summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    #filter_box {
      margin-#{direction(left)}: auto;
    }
  }
  .ui-combobox {
    min-width: 230px;
  }
  // Done here rather than converting the h4 below so that actual h4's don't
  // get affected, while still having the course h4's become h3's and maintain
  // the same style.
  .course_graphs, .department_graphs {
    h3, .h3 {
      margin-bottom: 0;
      padding-#{direction(right)}: 50px;
    }
  }
  .department_statistics {
    // colors.grid
    margin-top: 10px;
    table {
      width: 100%;
      margin: 20px 0;
      td {
        width: 14%;
        padding: 0 10px;
        margin: 10px 0;
        vertical-align: top;
        text-align: center;
        // colors.grid
        border-#{direction(left)}: 1px solid #cccccc;
      }
      td:first-child {
        border-#{direction(left)}: none;
      }
      .AnalyticsStats__Label {
        // colors.frame
        color: #555555;
        font-weight: bold;
      }
      .AnalyticsStats__Count {
        font-size: 1.5em;
        color: black;
      }
    }
  }
}

.analytics-tooltip {
  position: absolute;
  z-index: 10;
  background-color: black;
  border: 1px solid black;
  padding: 0.5em;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  border-radius: 5px;
  &.carat-top, &.carat-bottom {
    .ui-menu-carat, .ui-menu-carat span {
      border-color: black transparent;
    }
  }
  &.carat-left, &.carat-right {
    .ui-menu-carat, .ui-menu-carat span {
      border-color: transparent black;
    }
  }
  &.carat-left {
    .ui-menu-carat, .ui-menu-carat span {
      top: 50%;
      #{direction(left)}: -11px;
      border-width: 11px 11px 11px 0;
      margin-top: -11px;
      margin-#{direction(left)}: auto;
    }
    .ui-menu-carat span {
      border-width: 10px 10px 10px 0;
      #{direction(left)}: 1px;
      margin-top: -10px;
    }
  }
  &.carat-right {
    .ui-menu-carat, .ui-menu-carat span {
      top: 50%;
      #{direction(right)}: -11px;
      #{direction(left)}: auto;
      border-width: 11px 0 11px 11px;
      margin-top: -11px;
      margin-#{direction(left)}: auto;
    }
    .ui-menu-carat span {
      border-width: 10px 0 10px 10px;
      #{direction(right)}: 1px;
      margin-top: -10px;
    }
  }
}

#grades-graph, #assignment-finishing-graph, #responsiveness-graph,
#participating-graph, #finishing-assignments-graph {
  position: relative;
}

.legend_row {
  display: flex;
  align-items: baseline;
  margin-#{direction(left)}: 10px;
}

.legend_entry {
  white-space: nowrap;
}

.graph {
  margin-bottom: 40px;
}

.graph_legend {
  margin-#{direction(left)}: auto;
  margin-#{direction(right)}: 35px;
  .legend_swatch {
    display: inline-block;
    margin-#{direction(left)}: 20px;
    margin-#{direction(right)}: 5px;
    border: 1px solid white;
    border-radius: 5px;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    &.page_views {
      background-color: #a9c8d6;
    }
    &.participation {
      background-color: #114055;
    }
    &.instructors {
      background-color: #7eb5ce;
    }
    &.student {
      background-color: #ef9337;
    }
    &.onTime {
      background-color: #70a80b;
      border-radius: 0 0 8px 8px;
    }
    &.late {
      background-color: #e6b000;
      border-radius: 0;
    }
    &.missing {
      background-color: #ba1a17;
      border-radius: 8px 8px 0 0;
    }
    &.totalRange {
      background-color: white;
      color: #7eb5ce;
      span {
        width: 2px;
        height: 16px;
        background-color: #7eb5ce;
        display: inline-block;
        margin: 0 7px;
      }
      &.sa span {
        background-color: #555555;
      }
    }
    &.pc25-75 {
      background-color: #7eb5ce;
      &.sa {
        background-color: #cccccc;
      }
    }
    &.median {
      background-color: white;
      color: #114055;
      span {
        width: 16px;
        height: 1px;
        background-color: #114055;
        display: inline-block;
        margin: 7px 0;
      }
    }
    &.outlined {
      border: 1px solid #cccccc;
    }
    &.shape {
      &.circle {
        border-radius: 10px;
        background-color: #70a80b;
      }
      &.opencircle {
        width: 12px;
        height: 12px;
        border-radius: 8px;
        background-color: white;
        border: 2px solid #555555;
      }
      &.triangle {
        width: 0px;
        height: 0px;
        border-radius: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 16px solid #e6bb00;
      }
      &.square {
        border-radius: 0;
        background-color: #ba1a17;
      }
    }
  }
}

#students {
  th, td {
    text-align: direction(right);
  }
  th[scope='col'] > span.sortable {
    padding-#{direction(right)}: 20px;
    cursor: pointer;
    background: url(/images/tablesorter/bg.png) no-repeat right center;
    &:hover {
      background-image: url(/images/tablesorter/bg_hover.png);
    }
    &.headerSortDown {
      background-image: url(/images/tablesorter/asc.gif);
    }
    &.headerSortUp {
      background-image: url(/images/tablesorter/desc.gif);
    }
  }
  td .sortable {
    padding-#{direction(right)}: 20px;
  }
  .student {
    text-align: direction(left);
  }
  th .student {
    display: flex;
    align-items: center;
    .avatar {
      width: 30px;
      height: 30px;
      display: inline-block;
      vertical-align: middle;
      margin-#{direction(right)}: 5px;
    }
  }
  .loading {
    text-align: center;
    width: 100%;
    img {
      margin: 10px auto;
    }
  }
  .truncated {
    text-align: center;
    margin: 1em;
    padding: 0.7em;
  }
}

@import "./ReactBootstrapTable";
